<template>
    <div id="key-container">
        <div id="word-item" v-for="(item, index) in data" v-bind:key="index" @click="onSelected(item, index)" :class="{'item-selected': item.key == selected.key, 'even-item': index % 2 == 0}">
            {{ index + 1 }}: &nbsp; <span v-for="(word, wordIndex) in lintWordsWithOddWord(keyWord, item)" :key="wordIndex" :class="{'can-lint-word': wordIndex % 2 != 0}">{{ word }}</span>
        </div>
    </div>
</template>


<style lang="scss" scoped>
$primary-color: #3ba776;

#key-container {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}

$word-item-height: 40px;

#word-item {
  height: $word-item-height;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: $word-item-height;

  margin: {
    right: 10px;
    left: 10px;
  }

  padding: {
    right: 8px;
    left: 8px;
  }

  border: {
    bottom: {
      width: 1px;
      color: #f1f1f173;
      style: solid;
    }
  }
  cursor: pointer;
}

.even-item {
  background-color: #f1f1f15d;
}

.item-selected {
  background-color: rgba(0, 0, 0, 0.014);

  border: {
    // right: {
    //     width: 2px;
    //     color: $primary-color;
    //     style: solid;
    // }
    left: {
      width: 2px;
      color: $primary-color;
      style: solid;
    }
  }
}
.can-lint-word {
  color: $primary-color;
}
</style>


<script>

import lintWordsWithOddWord from "./linter"

export default {
    model: {
        event: "onSelected",
        prop: "selected"
    },
    props: {
        data: {
            type: Array,
            required: true
        },
        selected: {
            type: Object,
            required: true,
            validator: value => {
                let valid = value.key != undefined
                valid &= value.value != undefined

                if (!valid) throw new Error("Object must be there fields: {key: String, value: String")

                return valid
            }
        },
        keyWord: {
            type: String,
            required: true
        },
        languageDirection: {
            
        }
    },
    methods: {
        onSelected(value, index){
            this.$emit("onSelected", value)
            this.$emit("onSelectedIndexChanged", index)
        },
        lintWordsWithOddWord: lintWordsWithOddWord,
    }
}
</script>
